<template>
  <div class="addstudent_list">
    <el-dialog
      title="新增学员"
      :visible.sync="dialogVisible"
      size="small" @close="handleCancel">
      <div class="leave_cont">
        <el-row style="color:#33c9a6;font-weight:bold;margin:0 30px;">
          <el-col :span="4">课程名称：</el-col>
          <el-col :span="19">少儿足球长期培训</el-col>
        </el-row>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="学员姓名：" prop="name">
            <el-input v-model="ruleForm.name" style="width:320px;"></el-input>
          </el-form-item>
          <el-form-item label="学员性别：" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="学员国籍：" prop="nationality">
            <el-select v-model="ruleForm.nationality" placeholder="请选择国籍" style="width:320px;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码：" required>
            <el-col :span="7" style="margin-bottom:0;">
              <el-select v-model="ruleForm.numType" placeholder="证件类型" style="width:120px;">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-col>
            <el-col :span="14" style="margin-bottom:0;">
             <el-form-item prop="num">
                <el-input v-model="ruleForm.num" placeholder="请输入证件号码"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="学员住址：" prop="address">
            <el-input v-model="ruleForm.address" style="width:320px;"></el-input>
          </el-form-item>
          <el-form-item label="监护人姓名：" prop="patriarchName">
            <el-input v-model="ruleForm.patriarchName" style="width:320px;"></el-input>
          </el-form-item>
          <el-form-item label="监护人手机：" prop="patriarchNum">
            <el-input v-model="ruleForm.patriarchNum" style="width:320px;"></el-input>
          </el-form-item>
          <el-form-item label="报名费：" prop="money">
            <el-input v-model="ruleForm.money" style="width:320px;"></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input type="textarea" v-model="ruleForm.remark" style="width:320px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import validator from 'utils/validator'
export default {
  props: {
    isOff: {}
  },
  data () {
    return {
      dialogVisible: true,
      ruleForm: {
        name: '',
        sex: '',
        nationality: '',
        area: '',
        numType: '',
        num: '',
        address: '',
        patriarchName: '',
        patriarchNum: '',
        money: '',
        remark: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        nationality: [
          { required: true, message: '请选择国籍', trigger: 'change' }
        ],
        num: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          validator.rule.isIntadd
        ],
        address: [
          { required: true, message: '请输入学员住址', trigger: 'blur' }
        ],
        patriarchName: [
          { required: true, message: '请输入监护人姓名', trigger: 'blur' }
        ],
        patriarchNum: [
          { required: true, message: '请输入监护人手机', trigger: 'blur' },
          validator.rule.isPhone
        ],
        money: [
          { required: true, message: '请输入报名费', trigger: 'blur' },
          validator.rule.isIntadd
        ]
      }
    }
  },
  methods: {
    handleCancel () { // 取消
      this.$emit('input', false)
    },
    handleSubmit () { // 发起请求
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$emit('input', false)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss">
.addstudent_list{
  .el-dialog--small{
    width:600px;
  }
  .el-col{
    margin:0 0 22px 0;
  }
  .el-dialog__body{
    padding-bottom:0;
  }
}
</style>
